<style type="text/css">
	.second-title{
		margin:0 auto;
		height:0.889rem;
		line-height:0.889rem;
		width:100%;
		background-color:#F0F0F0;
	}
	.second-title span{
		font-size:0.333rem;
		line-height:0.889rem;
		margin-left:0.667rem;
		position:absolute;
	}
	.split-line{
		height:1px; 
		border:none;
		border-bottom:1px solid #F0F0F0;
		margin:0 auto;
		width:90%;
	}
	.select-day{
		text-align: center;
		font-size:0.5rem;
		float:left;
		width:25%;
		display:inline-block;
	}
	.select-day span{
		float:left;
		margin-left:0.3rem;
	}
	.select-day i{
		font-size:0.8rem;
		float:right;
		line-height:1.111rem;
	}
	.input-time{
		text-align: center;
		font-size:0.5rem;
		float:left;
		display:inline-block;
	}
	.input-time span{
		float:left;
		margin-left:0.3rem;
		margin-right:0.3rem;
	}
	.input-time input{
		border:none;
		width:1rem;
		border-bottom:1px solid #F08300;
		font-size:0.5rem;
		text-align:center;
	}
	.row-div{
		height:1.111rem;
		line-height:1.111rem;
		width:90%;
		margin:0 auto;
	}
	.select-day,.second-title,.input-time,.input-time input{
		color: #585858;
	}
	div.select-width{
		width:40%;
	}
	input.btn-left{
		width:45%;
		margin-left:2%;
	}
</style>
<script type="text/javascript">
(function(){
	<%
		local para = {
			parent_ctrl = {config = {}, parent_list = {}},
			device_manage = {client_list = {}}
		}

		local result = tpl_get_data(para, true)
	-%>

	var parentInfo = <%=result%>;
	var parentList = parentInfo[K_MODULE].parent_ctrl.parent_list;

	var param = stateman.current.param;
	var client = {};
	for (var k in param){
		var key = decodeURIComponent(k);
		var val = decodeURIComponent(param[k]);
		client[key] = val;
	}

	function getHour(time){
		var hour = parseInt(time/3600);
		return hour;
	}

	function getMinute(time){
		var minute = parseInt(time%3600);
		minute = parseInt(minute/60);
		return minute;
	}

	function setTimeList(num){
		if(num < 10){
			num = "0"+num;
		}
		return num;
	}

	function setTimeData(hour, minute){
		var time;
		time = hour * 3600;
		time += minute * 60;
		return time;
	}

	if(client.action == "add"){
		$(".head-btn-l").attr("href","#/parentCtrlRule/?mac="+client.mac+"&name="+client.name);
		$("#Del").hide();
	}else if(client.action == "edit"){
		$(".head-btn-l").attr("href","#/parentCtrlRule/?mac="+client.mac+"&name="+client.name);
		$("#Del").show();
		$("#Save").css({width:"45%"});
		initPage(client);
	}else{
		$("#Del").hide();
		initPage(null);
	}

	function iconDayClick(curThis){
		var value = $(curThis).attr("value");
		var tempday = [];
		tempday.push(curThis);
		tempday.push($("#AllDay"));
		var iday = $("#DaySel").find("i[name='day']");
		var num = 0;

		if (value == 0){
			for (var j = 0; j < iday.length; j++){
				num += Number($(iday[j]).attr("value"));
			}
			num += 1;
		}

		for (var i = 0; i < tempday.length; i++){
			if (value == 1){
				$(tempday[i]).removeClass("icon_select_on");
				$(tempday[i]).addClass("icon_select_off");
				$(tempday[i]).css({color:"#000000"});
				$(tempday[i]).attr("value","0");
			}else if(value == 0){
				if((num == 7 && i == 1)||(i == 0)){
					$(tempday[i]).removeClass("icon_select_off");
					$(tempday[i]).addClass("icon_select_on");
					$(tempday[i]).css({color:"#2AAE1A"});
					$(tempday[i]).attr("value","1");
				}
			}
		}
	}

	function initDay(rule){
		var strDay = rule["cycle"];
		var iday = $("#DaySel").find("i[name='day']");

		for (var i = 0; i < strDay.length; ++i){
			if (strDay[i] == "1"){
				iconDayClick(iday[i]);
			}
		}
	}

	function initTime(rule){
		$("#StartHour").val(setTimeList(getHour(rule.start_time)));
		$("#StartMinute").val(setTimeList(getMinute(rule.start_time)));
		$("#EndHour").val(setTimeList(getHour(rule.end_time)));
		$("#EndMinute").val(setTimeList(getMinute(rule.end_time)));

		if (0 == rule.start_time && 86340 == rule.end_time){
			allTimeClick("0");
		}
	}

	function allTimeClick(val){
		$("#StartHour").val(setTimeList(0));
		$("#StartMinute").val(setTimeList(0));
		$("#EndHour").val(setTimeList(23));
		$("#EndMinute").val(setTimeList(59));
		if (val == "0"){
			$("#StartHour").attr("disabled", "disabled");
			$("#StartMinute").attr("disabled", "disabled");
			$("#EndHour").attr("disabled", "disabled");
			$("#EndMinute").attr("disabled", "disabled");
			$("#AllTime").removeClass("icon_select_off");
			$("#AllTime").addClass("icon_select_on");
			$("#AllTime").css({color:"#2AAE1A"});
			$("#AllTime").attr("value","1");
		}else if(val == "1"){
			$("#StartHour").removeAttr("disabled");
			$("#StartMinute").removeAttr("disabled");
			$("#EndHour").removeAttr("disabled");
			$("#EndMinute").removeAttr("disabled");
			$("#AllTime").removeClass("icon_select_on");
			$("#AllTime").addClass("icon_select_off");
			$("#AllTime").css({color:"#F08300"});
			$("#StartTime").find("input[name='hour']").focus();
			$("#AllTime").attr("value","0");
		}else{
			return false;
		}
		return true;
	}

	function initPage(rule){
		if(rule != null){
			initDay(rule);
			initTime(rule);
		}
	}

	$("#AllTime").click(function(){
		var value = $(this).attr("value");
		allTimeClick(value);
	});

	$("#DaySel").find("i[name='day']").click(function(){
		iconDayClick(this)
	});

	$("#AllDay").click(function(){
		var iday = $("#DaySel").find("i[name='day']");
		iday.push(this);
		var value = $(this).attr("value");
		for (var i = 0; i < iday.length; i++){
			if (value == "0"){
				$(iday[i]).removeClass("icon_select_off");
				$(iday[i]).addClass("icon_select_on");
				$(iday[i]).css({color:"#2AAE1A"});
				$(iday[i]).attr("value","1");
			}else{
				$(iday[i]).removeClass("icon_select_on");
				$(iday[i]).addClass("icon_select_off");
				$(iday[i]).css({color:"#000000"});
				$(iday[i]).attr("value","0");
			}
		}
	});

	function checkDay(){
		var tempday = $("#DaySel").find("i[name='day']");
		var num = 0;
		var day = "";

		for (var i = 0; i < tempday.length; i++){
			num += Number($(tempday[i]).attr("value"));
			day = day + $(tempday[i]).attr("value");
		}

		if (num < 1){
			return false;
		}

		return day;
	}

	$("#Del").click(function(){
		var data = {};
		var para = {};
		para.parent_ctrl = {};
		para.parent_ctrl.parent_list = data;

		data.id = client.id;
		showLoading(label.saving);
		apiDel(para, function(){
			$.setTimeout(function(){
			closeLoading();
				stateman.go("parentCtrl");
			}, 2000);
		});
	});

	$("#Save").click(function(){
		if(client.action == "edit"){
			saveParentCtrl("set", client.id);
		}else{
			if (parentList.length == 10){
				showNote(errStr.maxRuleNumberTen);
				return false;
			}
			saveParentCtrl("add", "");
		}
	});

	function saveParentCtrl(action, index){
		var data = {};
		var para = {};
		var start_hour = $("#StartHour").val();
		var start_minute = $("#StartMinute").val();
		var end_hour = $("#EndHour").val();
		var end_minute = $("#EndMinute").val();
		var day = checkDay();

		para.parent_ctrl = {};
		para.parent_ctrl.parent_list = data;
		data.id = index;
		data.name = client.name;
		data.mac = client.mac;
		data.cycle = day;
		data.start_time = setTimeData(start_hour, start_minute);
		data.end_time = setTimeData(end_hour, end_minute);

		if (!day){
			showNote(errStr.selectAtLeastOneDay);
			return false;
		}

		if(!checkNumRange(start_hour, 23, 0)){
			showNote(errStr.startHoueErr);
			return;
		}

		if(!checkNumRange(start_minute, 59, 0)){
			showNote(errStr.startMinuteErr);
			return;
		}

		if(!checkNumRange(end_hour, 23, 0)){
			showNote(errStr.endHoueErr);
			return;
		}

		if(!checkNumRange(end_minute, 59, 0)){
			showNote(errStr.endMinuteErr);
			return;
		}

		if (errHandle(checkTime(data.start_time, data.end_time))){
			return;
		}

		showLoading(label.saving);
		if(action == 'set'){
			apiSet(para, function(ret){
				var code = ret[ERR_CODE];
				if (E_NONE == code){
					$.setTimeout(function(){
						closeLoading();
						stateman.go("parentCtrl");
					}, 2000);
				}else{
					errHandle(code);
					closeLoading();
				}
			});
		}else if(action == 'add'){
			apiAdd(para, function(ret){
				var code = ret[ERR_CODE];
				if (E_NONE == code){
					$.setTimeout(function(){
						closeLoading();
						stateman.go("parentCtrl");
					}, 2000);
				}else{
					errHandle(code);
					closeLoading();
				}
			});
		}
	}

	function errHandle(code)
	{
		switch(code){
		case E_NONE:
			return false;
		case E_CLIENT_RULENAME_LEN:
			showNote(errStr.devNameErr);
			break;
		case E_END_LESS_START:
			showNote(errStr.startLessEndTime);
			break;
		default:
			showNote(errStr.unknownErr + code);
			break;
		}
		return true;
	}

	function checkTime(start, end) {
		if(start >= end){
			return E_END_LESS_START;
		}

		return E_NONE;
	}
})();
</script>

<div class="head-con">
	<a href="#/devList" class="head-btn-l"><i class="head-btn icon icon_back"></i></a>
	<h1 class="head-title">{%label.selectBanNetworkTime%}</h1>
</div>
<div class="second-title" style="margin-top:1.111rem;">
	<span>{%label.dateSet%}</span>
</div>
<div class="row-div">
	<div class="select-day select-width">
		<span>{%label.everyDay%}</span>
		<i id="AllDay" class="icon icon_select_off" value="0"></i>
	</div>
</div>
<div class="split-line"></div>
<div id="DaySel">
	<div class="row-div">
		<div  class="select-day">
			<span>{%label.Monday%}</span>
			<i name="day" class="icon icon_select_off" value="0"></i>
		</div>	
		<div class="select-day">
			<span>{%label.Tuesday%}</span>
			<i name="day" class="icon icon_select_off" value="0"></i>
		</div>
		<div class="select-day">
			<span>{%label.Wednesday%}</span>
			<i name="day" class="icon icon_select_off" value="0"></i>
		</div>
		<div class="select-day">
			<span>{%label.Thursday%}</span>
			<i name="day" class="icon icon_select_off" value="0"></i>
		</div>
	</div>
	<div class="row-div">
		<div class="select-day">
			<span>{%label.Friday%}</span>
			<i name="day" class="icon icon_select_off" value="0"></i>
		</div>
		<div class="select-day">
			<span>{%label.Saturday%}</span>
			<i name="day" class="icon icon_select_off" value="0"></i>
		</div>
		<div class="select-day">
			<span>{%label.Sunday%}</span>
			<i name="day" class="icon icon_select_off" value="0"></i>
		</div>
	</div>
</div>
<div class="second-title">
	<span>{%label.timeSet%}</span>
</div>
<div class="row-div">
	<div class="select-day select-width">
		<span>{%label.allDay%}</span>
		<i id="AllTime" class="icon icon_select_off" value="0"></i>
	</div>
</div>
<div class="split-line"></div>
<div class="row-div">
	<div class="input-time" name="ruletime" id="StartTime">
		<span>{%label.startTime%}：</span>
		<input placeholder="00" class="textA" id="StartHour" maxlength="2" value="00">&nbsp;
		<input placeholder="00" class="textA" id="StartMinute" maxlength="2" value="00">
	</div>
</div>
<div class="split-line"></div>
<div class="row-div">
	<div class="input-time" name="ruletime" id="EndTime">
		<span>{%label.endTime%}：</span>
		<input placeholder="23" class="textA" id="EndHour" maxlength="2" value="23">&nbsp;
		<input placeholder="59" class="textA" id="EndMinute" maxlength="2" value="59">
	</div>
</div>
<div class="second-title"></div>
<div class="err-note hidden">
	<i class="err-icon icon_remind_line"></i>
	<p class="note-str"></p>
</div>
<div class="btn-con">
	<input id="Save" class="btn" type="button" value="{%btn.save%}" />
	<input id="Del" class="btn btn-left" type="button" value="{%btn.del%}" />
</div>